import React, {useEffect, useState} from 'react';
import style from './FinanceDetailed.module.scss'
import {useNavigate, useSearchParams} from "react-router-dom";
import {detailsApi, } from '../../http/serviceApi'

function FinanceDetailed(props) {
    const navigate = useNavigate()
    const [state,setSate] =useState({
        name:'',
        time:'',
        price:'',
        introduction:'',
        mainImg:[],
        imgList:[],
        state:false,
    })
    const [searchParams,SetSearchParams] =useSearchParams()
    const id = searchParams.get('id')
    useEffect(()=>{
            detailsApi({id})
                .then(res=>{
                    console.log(res.data.data)
                    setSate({
                        ...res.data.data
                    })
                })
    },[])


    //点击返回
    const backHandler =()=>{
        navigate(-1)
    }
    const imgBox = state.mainImg.map(item=><img src={item.thumbUrl}  key={item.id}/>)
    const imgListBox = state.imgList.map(item=><img src={item.thumbUrl} key={item.id}/>)
    return (
        <div>
            <div className={style.back} onClick={backHandler}>返回</div>
            <div className={style.title}>项目详情</div>
            <div className={style.main}>
                <div className={style.itme}>
                    <div className={style.left}>项目名称</div>
                    <div className={style.right}>
                       {state.name}
                    </div>
                </div>
                <div className={style.itme}>
                    <div className={style.left}>项目时长</div>
                    <div className={style.right}>
                        {state.time}
                    </div>
                </div>
                <div className={style.itme}>
                    <div className={style.left}>项目价格</div>
                    <div className={style.right}>
                        {state.price}
                    </div>
                </div>
                <div className={style.itme}>
                    <div className={style.left}>项目简介</div>
                    <div className={style.right}>
                       {state.introduction}
                    </div>
                </div>

                <div className={style.itme}>
                    <div className={style.left}>项目主图</div>
                    <div className={style.right}>
                        {imgBox}
                    </div>
                </div>
                <div className={style.itme}>
                    <div className={style.left}>项目图片</div>
                    <div className={style.right}>
                        {imgListBox}
                    </div>
                </div>

            </div>
        </div>
    );
}

export default FinanceDetailed;